<template>
    <div class="withdraw-home">
      <native :title="title"></native>
      <div class="withdraw-box-adress">
        <p>提现地址</p>
        <input type="text" v-model="withdrawAddress" placeholder="请输入提现地址">
      </div>
      <div class="withdraw-box-adress">
        <p>提现数量</p>
        <input type="text" style="font-size: 26px; font-family: axis;" v-model="withdrawNum" placeholder="0.00">
        <span style="position: absolute;top:50px;right: 15px; font-family: axis;font-weight: bold;">{{code}}</span>
      </div>
      <div style="float: right;padding: 17px 15px 27px 15px;color: rgba(255, 255, 255, .6);">
        <span style="font-size: 12px;margin-right: 3px;">剩余</span>
        <span>{{balance}} {{code}}</span>
        <span style="color: #6E59FF;" @click="allZhuan">全部转出</span>
      </div>
      <div class="withdraw-box-service">
        <div class="withdraw-box-top">
          <div class="withdraw-box-cloun">
            <span>矿工手续费</span>
            <span style="float: right;">{{code}}</span>
            <span style="float: right;color: #fff;font-family: axis;margin-right: 8px;" v-if="code == 'USDT'">{{freezeBalance}}</span>
            <span style="float: right;color: #fff;font-family: axis;margin-right: 8px;" v-else>{{(freezeBalance*withdrawNum).toFixed(2)}}</span>
          </div>
          <div class="withdraw-box-cloun" style="border:none;">
            <span>实际到账数量</span>
            <span style="float: right;">{{code}}</span>
            <span style="float: right;color: #fff;font-family: axis;margin-right: 8px;">{{accountNum}}</span>
          </div>
        </div>
        <div class="withdraw-box-bottom" style="height: 68px;">
          <div style="margin-top: 11px;color: #fff;">
            最小提现额度<span v-if="code == 'USDT'">{{usdtMinWithdrawAmount}}</span><span v-if="code == 'GTZ'">{{gtzMinWithdrawAmount}}</span>{{code}},
            最大提现额度<span v-if="code == 'USDT'">{{usdtMaxWithdrawAmount}}</span><span v-if="code == 'GTZ'">{{gtzMaxWithdrawAmount}}</span>{{code}}
          </div>
        </div> 
        <div class="withdraw-box-bottom">
          <div>
            <img src="../assets/img/transfer-icon-warning.svg" alt="">
            <span>风险提示</span>
          </div>
          <div style="margin-top: 11px;color: #fff;">务必仔细核对转账钱包地址，错误将导致提币无效且资产无法找回！</div>
          <p style="margin-top: 6px;color: #fff;">仅支持ERC20 USDT提现！</p>    
        </div>        
      </div>
      <div class="withdraw-btn" @click="jumpNext">
        <img src="../assets/img/transfer-icon-cashout-2.svg" alt="">
        <span>提现</span>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  import { Toast } from 'vant'
  export default {
    name: 'withdrawDeposit',
    data () {
      return {
        title:'提现',
        code:'',
        balance:0,
        withdrawAddress:'',
        withdrawNum:0,
        freezeBalance:'',
        accountNum:0,
        usdtMaxWithdrawAmount:0,
        usdtMinWithdrawAmount:0,
        gtzMaxWithdrawAmount:0,
        gtzMinWithdrawAmount:0,
      }
    },
    watch: {
      withdrawNum(val){
        val = Number(val);
        this.withdrawNum = Number(val);
        if(this.code == 'USDT'){
          if(val>this.freezeBalance){
            this.accountNum = val - this.freezeBalance;
          }else{
            this.accountNum = 0;
          }
        }
        if(this.code == 'GTZ'){
          if(val>0){
            this.accountNum = val - (val*this.freezeBalance);
          }else{
            this.accountNum = 0;
          }
        }
      }
    },
    components:{
      native
    },
    computed: {

    },
    mounted() {
      this.code = this.$route.params.code;
      this.title=this.$route.params.code+'提现';
      if(this.code == 'USDT'){
        this.balance = localStorage.getItem('usdtBalance');
        this.freezeBalance = Number(localStorage.getItem('usdtFee'));
        this.usdtMaxWithdrawAmount = Number(localStorage.getItem('usdtMaxWithdrawAmount'));
        this.usdtMinWithdrawAmount = Number(localStorage.getItem('usdtMinWithdrawAmount'));
      }else{
        this.gtzMaxWithdrawAmount = Number(localStorage.getItem('gtzMaxWithdrawAmount'));
        this.gtzMinWithdrawAmount = Number(localStorage.getItem('gtzMinWithdrawAmount'));
        this.balance = localStorage.getItem('gtzBalance');
        this.freezeBalance = localStorage.getItem('gtzFee');
      }
    },
    methods: {
      jumpNext(){
        if(!this.withdrawAddress){
          Toast('请输入提现地址！');
          return
        }
        if(this.withdrawNum<this.usdtMinWithdrawAmount && this.code == 'USDT'){
          Toast('最小提现额度为'+this.usdtMinWithdrawAmount+'USDT!');
          return
        }
        if(this.withdrawNum>this.usdtMaxWithdrawAmount && this.code == 'USDT'){
          Toast('最大提现额度为'+this.usdtMaxWithdrawAmount+'USDT!');
          return
        }
        if(this.withdrawNum<this.gtzMinWithdrawAmount && this.code == 'GTZ'){
          Toast('最小提现额度为'+this.gtzMinWithdrawAmount+'GTZ!');
          return
        }
        if(this.withdrawNum>this.gtzMaxWithdrawAmount && this.code == 'GTZ'){
          Toast('最小提现额度为'+this.gtzMaxWithdrawAmount+'GTZ!');
          return
        }
        localStorage.setItem('withdrawAddress',this.withdrawAddress);
        localStorage.setItem('code',this.code);
        localStorage.setItem('withdrawNum',this.withdrawNum);
        localStorage.setItem('accountNum',this.accountNum);
        this.$router.push('/confirmWithdrawal');
      },
      allZhuan(){
        this.withdrawNum = this.balance;
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .withdraw-home{
      width: 100%;
      min-height: 100vh;
      background-color: #111214;
      color: #fff;
    }
    .withdraw-box-adress{
      padding:15px;
      margin-bottom: 12px;
      margin-top: 10px;
      position: relative;
      input{
        background-color: rgba(0,0,0,0);
        border:none;
        border-bottom:1px solid rgba(255, 255, 255, 0.1);
        width:100%;
        height: 25px;
        font-size:15px;
        padding: 15px 0px;
      }
      input::-webkit-input-placeholder{
        color:rgba(255, 255, 255, .4);
      }
    }
    .withdraw-box-service{
      width: 100%;
      padding: 27px 15px;
    }
    .withdraw-box-top{
      width: 100%;
      height: 111px;
      background-color: #1E1F24;
      color: rgba(255, 255, 255, .6);
      padding: 5px 15px;
      border-radius: 8px;
      margin-top: 30px;
      .withdraw-box-cloun{
        padding: 15px 0px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
    }
    .withdraw-box-bottom{
      width: 100%;
      height: 106px;
      background-color: #1E1F24;
      color: rgba(255, 255, 255, .5);
      padding: 15px;
      border-radius: 8px;
      margin-top: 15px;
    }
    .withdraw-btn{
      position: fixed;
      bottom: 0px;
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      margin-left: 15px;
      margin-bottom: 10px;
      background-color: #6E59FF;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      img{
        vertical-align: middle;
        position: relative;
        top: -2px;
      }
    }
  </style>
